<template>
  <div class="starry-background">
    <div 
      v-for="star in stars" 
      :key="star.id"
      class="shooting-star"
      :style="star.style"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'StarryBackground',
  
  data() {
    return {
      stars: [],
      maxStars: 20
    }
  },
  
  methods: {
    createStar() {
      const delay = Math.random() * 2
      const duration = 6 + Math.random() * 4
      const top = Math.random() * 100
      const left = Math.random() * 100
      
      return {
        id: Math.random(),
        style: {
          top: `${top}%`,
          left: `${left}%`,
          width: '100px',
          animationDelay: `${delay}s`,
          animationDuration: `${duration}s`
        }
      }
    },
    
    initStars() {
      this.stars = Array(this.maxStars).fill().map(this.createStar)
    },
    
    updateStar(index) {
      this.$set(this.stars, index, this.createStar())
    }
  },
  
  mounted() {
    this.initStars()
    
    // 为每个星星创建独立的动画循环
    this.stars.forEach((_, index) => {
      const update = () => {
        this.updateStar(index)
        setTimeout(update, (6000 + Math.random() * 4000))
      }
      setTimeout(update, Math.random() * 2000)
    })
  }
}
</script>

<style lang="scss" scoped>
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.shooting-star {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color), transparent);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px var(--accent-color));
  opacity: 0.6;
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    transform: translateY(-50%);
  }
}

@keyframes shooting-star {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(120vw);
    opacity: 0;
  }
}
</style> 